<template>
  <!-- 上班组件 -->
  <div>
    <!-- 任务 <div class="content2_content_but">抢单</div> -->
    <div class="gotowork_content1">
      <span>待领任务</span>
      <span @click="ToUnclaimed">更多 &gt;</span>
    </div>

    <div class="gotowork1" v-if="worklist.length > 0">
      <div
        class="gotowork_content"
        v-for="(item, index) in worklist"
        :key="index" v-show="index < 5"
      >
        <div class="gotowork_content2">
          <div class="content2_title">
            <span>{{ item.title }}</span>
            <span>{{item.area}} | {{ item.cate_name }}</span>
            <span @click="Todeterminedes(item.id,item.status)">详情 &gt;</span>
          </div>
          <div class="content2_content">
            <div class="content2_details">
              <span>费用: {{ item.price }}</span>
              <span>时间: {{ item.add_time }}</span>
            </div>
            <div @tap="onCreateWater(item.id)" class="content2_content_but">抢单</div>
          </div>
        </div>
        <div class="gotowork_content3">
          <div>
            <img :src="item.avatar" alt="" />
            <span>{{ item.nickname }}</span>
          </div>
          <span>{{item.address}}</span>
          <span>{{item.timeTran}}</span>
        </div>
      </div>
    </div>
    <div class="tishi" v-else>暂无待领任务</div>

    <!-- 提醒 -->
    <div class="gotowork_content">
      <div class="gotowork_content1">
        <span>今日工单提示</span>
        <span @click="ToToday">更多 &gt;</span>
      </div>
      <div v-if="remindlist.length > 0">
        <div class="remind_title" v-for="(remind,index) in remindlist" :key="index">
          <span style="width:220rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{remind.title}}</span>
          <span style="width:200rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{remind.area}} | {{remind.cate_name}}</span>
          <span>{{remind.timeTran}} &gt;</span>
        </div>
      </div>
      <div class="tishi" v-else>今日暂无工单</div>
      <!-- <div class="remind_title">
        <span>上水管维修</span>
        <span>房县|上水维修</span>
        <span>下午04:00 &gt;</span>
      </div> -->
    </div>
  </div>
</template>

<script>
export default {
  props: {
    worklist: {
      type: Array,
      default: () => {
        return [];
      },
    },
    remindlist: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      user: ''
    }
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  methods: {
    // 跳转待领取任务页面
    ToUnclaimed() {
      wx.navigateTo({
        url: "../unclaimed/main",
      });
    },
    // 跳转工单详情页面
    Todeterminedes(id,status) {
      wx.navigateTo({
        url: '../determinedes/main?id=' + id + '&status=' + status
      })
    },
    // 跳转今日提示页面
    ToToday() {
      wx.navigateTo({
        url: "../today/main",
      });
    },
    // /api/wechatapp/createWater
    onCreateWater(id) {
      // console.log(id)
      let mobile =  wx.getStorageSync("mobile")
      this.request({
        url: this.baseUrl + '/api/edit/waterUser',
        data:{
          type: 1,
          mobile: mobile
        },
        method: 'POST',
      })
      .then(result=>{
        if(result.status == 200){
          this.user = result.data.user_login
          this.request({
            url: this.baseUrl + '/api/wechatapp/createWater',
            data:{
              water_id: id,
              water_user_id: this.user.id,
            },
            method: 'POST',
          })
          .then(result=>{
            if(result.status == 200){
              console.log(result)
              wx.navigateTo({
                url: "/pages/success/main",
              })
              return true
            } else {
              wx.showModal({
                title: '抢单人账号正在审核中',
                content: '',
                success: function (res) {
                  if (res.confirm) {
                    // console.log('用户点击确定');
                  } else if (res.cancel) {
                    // console.log('用户点击取消');
                  }
                }
              })
              // wx.showToast({
              //   title: result.msg,
              //   icon: "none",
              // })
              return false
            }
          })
        } else {
          return false
        }
      })
      
    }
  },
  components: {},
};
</script>

<style scoped >
/* 上班css */
.gotowork_content {
  padding: 20rpx 20rpx;
  border-radius: 20rpx;
  margin: 20rpx 20rpx;
  background-color: white;
}
.gotowork1 .gotowork_content:first-child {
  margin-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.gotowork_content1 {
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  margin: 20rpx 20rpx 0;
  background-color: white;
  padding: 20rpx;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #f5f5f5;
}
.gotowork_content1 > span:nth-child(1) {
  font-size: 35rpx;
}
.gotowork_content1 > span:nth-child(2) {
  color: #999999;
}
.gotowork_content2 {
  padding: 15rpx 0;
  border-bottom: 1px solid #f5f5f5;
}
.content2_title {
  display: flex;
  justify-content: space-between;
}
.content2_title > span:nth-child(1) {
  font-size: 35rpx;
  width: 220rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.content2_title > span:nth-child(2) {
  /* flex: 2; */
  font-size: 35rpx;
  margin-right: 100rpx;
}
.content2_title > span:nth-child(3) {
  /* flex: 1; */
  color: #999999;
}
.content2_content {
  margin-top: 15rpx;
  display: flex;
  justify-content: space-between;
}
.content2_details {
  display: flex;
  flex-direction: column;
}
.content2_details span {
  margin: 10rpx 0;
}
.content2_content_but {
  width: 120rpx;
  height: 60rpx;
  line-height: 60rpx;
  background: #1677ff;
  border-radius: 40rpx;
  text-align: center;
  color: white;
  margin-top: 35rpx;
}
.gotowork_content3 {
  display: flex;
  justify-content: space-between;
  margin-top: 40rpx;
  color: #999999;
}
.gotowork_content3 img {
  height: 48rpx;
  width: 48rpx;
  border-radius: 50%;
  margin: 0 20rpx 20rpx 0;
  background-color: #eee;
}
.gotowork_content3 > div:nth-child(1) {
  display: flex;
}
.remind_title {
  display: flex;
  justify-content: space-between;
  padding: 40rpx 20rpx;
  background: #f8f9fc;
  margin: 20rpx 0;
}
.remind_title > span:nth-child(3) {
  color: #999999;
}
</style>
